import React, { Fragment, useReducer } from 'react';
import ticketJson from './filter.json'
import './index.scss'
import classNames from 'classnames'

/**
 * 1. 多选效果的数据是一个json数据
 * 2. 如果直接修改json不通过react更新机制，不会导致页面触发更新
 * 3. 引入了useReducer
 * 4. 
 * 
 * 
 */



interface IProps {

}

function reducer(state: any, action: any) {
  switch (action.type) {
    case "change_checked":
      state.forEach((val: any) => {
        if (val.name === action.data.item.name) {
          // 基于当前的数据，（火车票座次类型、车次类型、出发车站、到达车站）
          let data = action.data.item.children;
          let cIndex = action.data.index
          if (!data[cIndex].checked) {
            val.active.push(data[cIndex])
            data[cIndex].checked = true
          } else {
            val.active.splice(cIndex, 1)
            data[cIndex].checked = false
          }
        }
      })
      console.log(state, 'state====state')
      return [...state]
    case "to_actives":

      return [...state]
    default:
      return { ...state }
  }
}

const TicketFilter: React.FC<IProps> = (props) => {

  const [state, dispatch] = useReducer(reducer, ticketJson)
  const filterArr = ({ item, val, index }: any) => {
    dispatch({
      type: 'change_checked',
      data: { item, flag: !val.checked, index },
    })
  }

  /*
  *
   * from: 北京
    to: 上海
    date: 2020-09-01
    highSpeed: true

    orderType: 1
    onlyTickets: false  单选 是否多选

    checkedTicketTypes: 7         座位类型
    checkedTrainTypes: 1,3,5      车次类型
    checkedDepartStations: 北京南  触发车站 
    checkedArriveStations: 南京南  到达车站

    departTimeStart: 0            
    departTimeEnd: 24
    arriveTimeStart: 0
    arriveTimeEnd: 24
   */

  const sureAjax = () => {
    // { name: checked: value }
    let data: any = []
    state.forEach((val: any) => {
      val.active.forEach((item: any) => {
        data.push(item)
      })
    })
    console.log("Data:", data)
    let brr: any = []
    let crr: any = []
    let drr: any = []
    let err: any = []
    data.forEach((item: any) => {
      if (item.type === 'takeType') {
        brr.push(item.value)
      } else if (item.type === 'trainNumber') {
        crr.push(item.value)
      } else if (item.type === 'depart') {
        drr.push(item.name)
      } else {
        err.push(item.name)
      }
    })
    let params = {
      checkedTicketTypes: [...brr].toString(),
      checkedTrainTypes: [...crr].toString(),
      checkedDepartStations: [...drr].toString(),
      checkedArriveStations: [...err].toString()
    }
    console.log("paramsBrr:", params)
  }



  return <div className="container">
    <div className="mask"></div>
    <div className="tip">
      <header className="header">
        <span >重置</span>
        <span onClick={sureAjax}>确定</span>
      </header>
      <main className="main">
        <div className="content">
          {console.log("state:", state)}
          {
            state.map((item: any) => {
              return (
                <Fragment key={item.name}>
                  <h1>{item.name}</h1>
                  <div className="type-wrapper">
                    {
                      item.children.map((val: any, index: number) => {
                        return <span className={
                          classNames("type-span", 'hide',
                            {
                              "show": val.checked
                            }
                          )} key={val.name}
                          onClick={() => filterArr({ item, val, index })}
                        >{val.name}</span>
                      })
                    }
                  </div>
                </Fragment>
              )
            })
          }
        </div>
      </main>
    </div>
  </div>
}

export default TicketFilter;